<template>
  <page-bg-header-view class="day-sign" :img-url="bgImg" title="每日签到" @back-click="toBack">
    <KView class="day-sign-plane" v-if="signData!==null">
      <KView class="day-sign-info clearfix">
        <KView class="day-sign-user-avatar">
          <sys-avatar :url="user.headimgurl" shape="circle"></sys-avatar>
        </KView>
        <KView class="day-sign-info-data">
          <KView class="ellipsis day-sign-username">{{user.nickname}}</KView>
          <KView class="day-sign-score">
            <span>当前积分：</span>
            <span style="color:#59c163">{{signData.score}}</span>
          </KView>
          <KView class="day-sign-btn">今日签到</KView>
        </KView>
      </KView>
      <KView class="day-sign-line"></KView>

      <day-sign-datetime :sign-data="signData"></day-sign-datetime>
      <KView class="day-sign-line"></KView>

      <KView class="day-sign-calendar">
        <sys-calendar :year-month="signData.time">
          <!-- <div slot="day" slot-scope="scope" v-if="scope."></div> -->
        </sys-calendar>
      </KView>
    </KView>
  </page-bg-header-view>
</template>

<script>
  import GlobalData from 'utils/globalData';

  import PageBgHeaderView from 'common/pageBgHeaderView';
  import SysAvatar from 'common/sysAvatar';
  import SysCalendar from 'common/sysCalendar';
  import DaySignDatetime from './daySignDatetime';

  import DaySignData from 'models/personalCenter/daySignData';

  import storeMixins from 'mixins/storeMixins';

  export default {
    mixins: [storeMixins],

    data() {
      let imgData = GlobalData.images.personalCenter;
      return {
        isMiniprogram: process.env.isMiniprogram,
        bgImg: imgData.bg,
        signData: null
      };
    },

    created() {
      this.signData = new DaySignData();
    },

    methods: {
      toBack() {
        if (!this.isMiniprogram) {
          window.history.back();
          return;
        }
        wx.navigateBack();
      }
    },

    components: {
      PageBgHeaderView,
      SysAvatar,
      SysCalendar,
      DaySignDatetime
    }
  };

</script>

<style lang="scss">
  .day-sign {
    .page-bg-header-view-content {
      .page-bg-header-view-plane {
        padding-left: formatPx(30);
        padding-right: formatPx(30);
      }
    }

    .day-sign-line {
      height: 1px;
      background: #d8d8d8;
    }

    .day-sign-plane {
      box-shadow: 0 formatPx(2) formatPx(10) formatPx(5) rgba(0, 0, 0, .14);
      border-radius: formatPx(8);
      background: #ffffff;
      padding: formatPx(50) 0;

      .day-sign-info {
        padding: 0 formatPx(30);
        height: formatPx(180);
        margin-bottom: formatPx(40);

        >div {
          float: left;
        }

        .day-sign-user-avatar {
          width: formatPx(135);
          height: formatPx(135);
        }

        .day-sign-info-data {
          width: calc(100% - #{formatPx(166)});
          margin-left: formatPx(30);

          >div {
            margin-bottom: formatPx(15);

            &:last-child {
              margin-bottom: 0;
            }
          }

          .day-sign-username {
            font-size: formatPx(30);
          }

          .day-sign-score {
            font-size: formatPx(26);
          }

          .day-sign-btn {
            width: formatPx(170);
            height: formatPx(60);
            border-radius: formatPx(30);
            line-height: formatPx(60);
            text-align: center;
            color: #ffffff;
            background: #59c163;
            font-size: formatPx(30);
          }
        }
      }

      .day-sign-datetime {
        margin: formatPx(50) 0;
        padding: 0 formatPx(30);
      }

      .day-sign-calendar {
        margin-top: formatPx(46);
      }
    }
  }

</style>
